<template>
	<div class="heads">
		<div class="big-center">
			<div class="center">
				<el-row :gutter="10">
					<!-- <el-col :span="5" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"> -->
					<el-col :xs="8" :sm="6" :md="8" :lg="8">
						<div class="top-left">
							<!-- <div class="logoname">中国</div> -->
							<div class="logins">
								<el-dropdown trigger="click" @command="handleCommandLanguage">
									<span class="el-dropdown-link">
										{{ languageValue }}<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item :command="item" v-for="item, index in languageList"
											:key="index">{{ item.remark
											}}</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<el-dropdown trigger="click" @command="handleCommandDi">
									<span class="el-dropdown-link">
										{{ addressValue }}<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item :command="item" v-for="item, index in addressList"
											:key="index">{{ item.address
											}}</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<el-dropdown trigger="click" @command="handleCommandCurrency">
									<span class="el-dropdown-link">
										{{ currencyValue }}<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item :command="item" v-for="item, index in currencyList"
											:key="index">{{ item.title
											}} {{ item.figure
											}}</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<!-- <el-dropdown v-if="userId" trigger="click" @command="handleCommandDi">
									<span class="el-dropdown-link">
										{{ addressValue }}<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item :command="item" v-for="item, index in addressList"
											:key="index">{{ item.provinces
											}}</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown> -->
							</div>
						</div>
					</el-col>
					<el-col :xs="16" :sm="18" :md="16" :lg="16">
						<div class="top-right">
							<span @click="goHome()">{{ $t('head.searchHomePage') }}</span>
							<span v-if="!userId" @click="goAbute('/login')">{{ $t('head.searchRegisterAndLogIn')
								}}</span>
							<!-- <span @click="goShoppingCar('/order')">会员中心</span> -->
							<!-- <span @click="goShoppingCar('/order')">帮助中心</span> -->
							<span v-if="userId" @click="goShoppingCar('/order')">{{ $t('head.searchPersonalCenter')
								}}</span>
							<span @click="goChat()">{{ $t('head.searchOnlineCustomerService') }}</span>
							<span v-if="userId" @click="quit()">{{ $t('head.searchLogOut') }}</span>
							<!-- <span v-show="userId" @click="quit()">{{ $t('head.searchLogOut') }}1111</span> -->
							<!-- <span @click="goShoppingCar('/shoppingCar')"><i class="el-icon-phone"></i></span>
							<span @click="goShoppingCar('/shoppingCar')"><i class="el-icon-s-fold"></i></span> -->
							<!-- <span> 
								<span @click="goChat()" class="el-dropdown-link" style="color: #999;">
									在线客服
								</span>
							</span> -->
							<!-- <span >
								<el-dropdown  @command="handleCommand">
									<span class="el-dropdown-link" style="color: #999;">
										网站导航<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<div style="width: 200px;display: inline-block;">
											<el-dropdown-item v-for="(item,index) in list" :key="index" :command="item.url" >{{item.name}}</el-dropdown-item>
										</div>
									</el-dropdown-menu>
								</el-dropdown>
							</span> -->
							<!-- <span>
								<el-dropdown>
									<span class="el-dropdown-link" style="color: #999;">
										手机版<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>
											<img style="height: 100px;width: 100px;" :src="QRcode" />
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</span> -->
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="big-centers">
			<div class="big-centersBox">
				<div class="center Hcenter" @click="goHome()">
					<!-- <div class="cons left" @click="goHome()" style="border:1px solid red;height:55px"> -->
					<!-- <div class="cons homelog" @click="goHome()" style=""> -->
					<img src="../assets/img/logo_1.jpg" style="width:100%" />
				</div>
				<div class="cons cont">
					<!-- <div class="searchs" :class="languageType == 'zh' ? 'zhongwen' : ''" @click="goAbute('/productList')"> -->
					<div class="searchs" :class="languageType == 'zh' ? 'zhongwen' : ''">
						<el-input clearable :placeholder="$t('head.searchPol')" v-model="sousuoValue"
							class="input-with-select" style="height: 55px !important;" @clear="clearInput"
							@input="inputSearch">
							<el-button slot="append" @click="sousuo('/productList')">{{ $t('head.searchText')
								}}</el-button>
						</el-input>
					</div>

				</div>
				<div class="houwuche" @click="goShoppingCar('/shoppingCar')" v-if="userId">
					<el-badge :value="productList.length" class="item">
						<i class="el-icon-shopping-cart-2" style="font-size: 30px;"></i>
					</el-badge>
					&nbsp;&nbsp; {{ $t('head.searchMyShoppingCart') }}
				</div>
				<div class="houwuche" @click="goShoppingCar('/shoppingCar')" v-if="!userId">
					<i class="el-icon-shopping-cart-2" style="font-size: 30px;"></i>
					&nbsp;&nbsp; {{ $t('head.searchMyShoppingCart') }}
				</div>
			</div>

			<!-- <div class="houwuche" @click="goShoppingCar('/shoppingCar')" v-show="!userId">
				<i class="el-icon-shopping-cart-2" style="font-size: 30px;"></i>
				&nbsp;&nbsp; {{ $t('head.searchMyShoppingCart') }}
			</div> -->
			<!-- <div class="cons right">
					<div class="myCars">
						<el-badge v-if="dataC" :value="dataC.length" class="item">
							<img class="carimg" src="../assets/head/card.png" />
							<span class="myCar" @click="goShoppingCar('/shoppingCar')">我的购物车</span>
						</el-badge>
						<div v-else>
							<img class="carimg" src="../assets/head/card.png" />
							<span class="myCar" @click="goShoppingCar('/shoppingCar')">我的购物车</span>
						</div>
					</div>
				</div> -->
		</div>
	</div>
	<!-- </div> -->
</template>

<script>
import {
	Loading
} from 'element-ui';
// import url from 'postcss-url';
// import { get } from 'vue-cookie';
export default {
	name: 'Head',
	props: {
		data: [],
		dataC: []
	},
	data() {
		return {
			sousuoValue: '',
			list: [
				{ name: '热卖榜单', url: '/?index=1' },
				{ name: '精选好物', url: '/?index=2' },
				{ name: '每日上线', url: '/?index=3' },
				{ name: '拼团购', url: '/?index=4' },
				// { name:'个人中心', url:'/order' },
			],
			QRcode: '',
			browseList: {
				content: []
			}, //足迹列表
			productList: [],
			page: 1,
			size: 100,
			uuid: this.$cookie.get('uuid'),
			guojiaList: ['中国', '美国', '俄罗斯', '法国', '英国'],
			guojiaValue: '中国',
			bizhongList: ['CNY', 'USD', "GBP"],
			bizhongValue: 'CNY',
			addressList: [],
			addressValue: '',
			languageValue: '',
			languageType: '',
			languageList: JSON.parse(localStorage.getItem('languageList')) || [],
			currencyList: [],
			currencyValue: '',
			previousRoute: ''
		}
	},
	watch: {
		'$route'(to, from) {
			// 当路由发生变化时，更新previousRoute的值
			console.log('to', to)
			console.log('from', from)
			this.previousRoute = from.path;
		}
	},
	mounted() {
		this.languageList = JSON.parse(localStorage.getItem('languageList'))
		let language = localStorage.getItem('language')
		this.languageType = language
		if (language == '' || language == undefined || language == null) {
			this.getAddressListMap()
		} else {
			this.getDefault()
		}
		let currencyObj = this.$store.state.currencyInfo
		let currencyList = this.$store.state.currencyList
		console.log('币种信息====,', currencyObj)
		if (!currencyObj.id) {
			this.getCurrencyList()
		} else {
			this.currencyValue = currencyObj.title + ' ' + currencyObj.figure
		}
		if (currencyList.length !== 0) {
			this.currencyList = currencyList
		} else {
			this.getCurrencyList()
		}
		let souValue = this.$store.state.sousuoValue
		if (souValue == '' || souValue == undefined || souValue == null) {

		} else {
			this.sousuoValue = souValue
		}
		if (this.uuid) {
			this.getShoppingCar()
			// this.getAddressList()
		}
	},
	created() {
		this.getCode()
	},
	computed: {
		userId() {
			if (this.$cookie.get('uuid')) {
				return this.$cookie.get('userId')
			} else {
				this.$store.commit('updateUserId', '')
				this.$store.commit('updateRelationId', '')
				this.$cookie.set('uuid', '')
				this.$cookie.set('userId', '')
				this.$cookie.set('relationId', '')
				this.$cookie.set('image_url', '')
				this.$cookie.set('nickName', '')
				this.$cookie.set('phone', '')
			}

			// return this.$store.state.userId

		},
		// productList (newLength, oldLength) {
		// 	// 当购物车商品长度发生变化时，会进入这个函数
		// 	console.log(`购物车商品数量basd为：${oldLength}`);
		// 	console.log(`购物车商品数量变为：${newLength}`);
		// 	// 这里可以执行其他逻辑，比如更新购物车总金额等
		// }
	},
	methods: {

		clearInput() {
			// console.log('aaaa-----无')
			this.$store.commit('sousuoValue', this.sousuoValue)
		},
		inputSearch(e) {
			// console.log('aaaa---变',e)
			if (e == '' || e == undefined || e == null) {
				this.$store.commit('sousuoValue', this.sousuoValue)
			}
		},
		goShoppingCar(url) {
			if (this.userId) {
				this.$router.push({
					path: url
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}

		},
		goHome() {
			if (this.$route.path == '/') {

			} else {
				this.$router.push({
					path: '/'
				})
			}

		},
		goAbute(url) {
			this.$router.push({
				path: url,
				query: {
					value: this.sousuoValue
				}
			})
		},
		goChat() {
			if (this.userId) {
				this.$http({
					url: this.$http.adornUrl('/chat/save'),
					method: 'post',
					data: this.$http.adornData({
						storeHead: "地摊兄自营店铺",
						storeId: "0",
						storeName: "",
						userId: this.$cookie.get('userId'),
						userName: this.$cookie.get('nickName'),
					})
				}).then(({ data }) => {
					let returnData = data.data;
					this.$router.push({
						path: '/vueMchat?chatId=' + returnData.chatId
					})
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}
		},
		handleCommand(command) {
			this.$router.push({
				path: command
			})
		},
		sousuo(url) {
			// console.log(this.$router.path,'当前页面的路由地址')
			// console.log('qianyige', this.$route)
			// console.log(this.$route.path != '/productList', 'aaaa----当前页面路由地址',);
			// if
			if ('/productList' != this.$route.path) {
				if (this.sousuoValue == '') {
					this.$message('搜索内容不能为空')
				} else {
					// this.sousuoValue = this.$store.state.sousuoValue
					this.$store.commit('sousuoValue', this.sousuoValue)
					this.$router.push({
						path: url,
					})
				}
			} else {
				// this.sousuoValue = this.$store.state.sousuoValue
				// this.sousuoValue = this.$store.state.sousuoValue
				// console.log('this.sousuoValue',this.sousuoValue)
				this.$emit('callParentMethod', this.sousuoValue);
			}

		},
		getCode() {
			this.$http({
				url: this.$http.adornUrl('/common/type/280'),	//小程序二维码
				method: 'get',
			}).then(({ data }) => {
				window.localStorage.setItem("QRcode", data.data.value);
				this.QRcode = data.data.value
			})

		},
		//退出登录
		quit() {
			this.$store.commit('updateUserId', '')
			this.$store.commit('updateRelationId', '')
			this.$cookie.set('uuid', '')
			this.$cookie.set('userId', '')
			this.$cookie.set('relationId', '')
			this.$cookie.set('image_url', '')
			this.$cookie.set('nickName', '')
			this.$cookie.set('phone', '')
			// console.log(this.$route.path, '当前页路由')
			if (this.$route.path == '/') {
				this.$router.go(0)
			} else {
				this.$router.push({
					path: '/'
				})
			}

		},
		// 获取币种
		getCurrencyList() {
			let data = {
				page: 0,
				size: 9999,
			}
			this.$http({
				url: this.$http.adornUrl('/currency/list'),
				method: 'get',
				params: this.$http.adornParams(data)
			}).then(res => {
				console.error('res-----获取币种', res)
				if (res.data.status == 0) {
					this.currencyList = res.data.data.content
					this.$store.commit('currencyList', this.currencyList)
					this.currencyValue = this.currencyList[0].title + ' ' + this.currencyList[0].figure
					this.getCurrencyInfo(this.currencyList[0].id)
				}
			})
		},
		// 更具币种id,查询币种信息
		getCurrencyInfo(id) {
			let data = {
				id: id
			}
			this.$http({
				url: this.$http.adornUrl('/currency/find'),
				method: 'get',
				params: this.$http.adornParams(data)
			}).then(res => {
				if (res.data.status == 0) {
					let dataInfo = res.data.data
					this.$store.commit('currencyInfo', dataInfo)
				}
			})
		},
		// 获取地址
		getAddressListMap() {
			this.$http({
				url: this.$http.adornUrl('/languageType/getLanguageTypeListMap'),
				method: 'get',
			}).then(res => {
				if (res.data.status == 0) {
					// this.addressList=res.data.data
					this.languageList = res.data.data
					// let arrList = []
					// let language = localStorage.getItem('language')
					let language = localStorage.getItem('language')
					// this.languageList.forEach(item => {
					// 	if (item.language == language) {
					// 		arrList.push(item.map)
					// 	}
					// })
					// this.addressList = arrList
					let resItem = this.languageList.some(item => item.language == language)
					if (resItem) {
						let indexLang = this.languageList.findIndex(item => item.language == language)
						if (indexLang !== -1) {
							this.languageValue = this.languageList[indexLang].remark
							this.addressList = this.languageList[indexLang].listMap
							this.addressValue = this.addressList[0].address
						} else {
							console.error('没有找到匹配的语言');
						}
					} else {
						console.error('3333', language)
					}
				}
			})
		},
		// 设置默认选中的语言和地址
		getDefault() {
			this.languageList = JSON.parse(localStorage.getItem('languageList'))
			let language = localStorage.getItem('language')
			if (this.languageList.length > 0) {
				// let arrList = []
				// this.languageList.forEach(item => {
				// 	if (item.language == language) {
				// 		arrList.push(item.map)
				// 	}
				// })
				// this.addressList = this.languageList.listMap
				let resItem = this.languageList.some(item => item.language == language)
				if (resItem) {
					let indexLang = this.languageList.findIndex(item => item.language == language)
					if (indexLang !== -1) {
						this.languageValue = this.languageList[indexLang].remark
						this.addressList = this.languageList[indexLang].listMap
						this.addressValue = this.addressList[0].address
						this.fetchLanguageFiles(language)
					} else {
						console.error('没有找到匹配的语言');
					}
				} else {
					console.error('3333', language)
				}
			} else {
				this.getAddressListMap()
			}
		},
		//获取地址列表
		getAddressList() {
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$http({
				url: this.$http.adornUrl('/address/findByUserId'),
				method: 'get',
				params: this.$http.adornParams({
					'userId': this.userId,
				})
			}).then(({
				data
			}) => {
				this.$nextTick(() => {
					loadingInstance.close();
				})
				if (data && data.status === 0) {
					let returnData = data.data
					returnData.forEach(res => {
						if (res.isDefault) {
							res.select = 1
						} else {
							res.select = 0
						}
					})
					// this.addressList = returnData
				}
			})
		},
		//获取购物车列表
		getShoppingCar() {
			let that = this
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$http({
				url: this.$http.adornUrl('/selfCart/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page': this.page - 1,
					'size': this.size,
					'userId': this.userId
				})
			}).then(({ data }) => {
				this.productList = []
				this.$nextTick(() => {
					loadingInstance.close();
				})
				if (data && data.status == 0) {
					data.data.content.forEach(res => {
						res.select = true
						this.productList.push(res)
						// if(res.sku) {
						// 	this.productList.push(res)
						// }
					})
					// this.productList = data.data.content
				}
			}).catch((error) => {
				console.log('error', error)
				that.$nextTick(() => {
					loadingInstance.close();
				})
			})
		},
		// 选择地址
		handleCommandDi(command) {
			this.addressValue = command.address
		},
		// 选择语言
		handleCommandLanguage(command) {
			this.$i18n.locale = command.language;
			this.getAddressListMap()
			this.fetchLanguageFiles(command.language);
			this.languageValue = command.remark
			this.languageType = command.language
			localStorage.setItem('language', command.language)
		},
		// 选择币种
		handleCommandCurrency(command) {
			this.currencyValue = command.title + ' ' + command.figure
			// let aaa=this.$store.state.currencyInfo
			this.getCurrencyInfo(command.id)
		},
		fetchLanguageFiles(language) {
			let obj = {
				language: language
			}
			this.$http({
				url: this.$http.adornUrl('/configI18n/getLanguageJsonList'),
				params: this.$http.adornParams(obj)
			}).then(res => {
				if (res.data.status == 0) {
					console.log('aaaa', language)
					this.$i18n.setLocaleMessage(language, res.data.data);
					// this.getAddressListMap()
				}
			})
			// axios.get(this.baseURL + `/configI18n/getLanguageJsonList?language=${language}`)
			// 	.then(res => {
			// 		if (res.data.status == 0) {
			// 			this.$i18n.setLocaleMessage(language, res.data.data);
			// 		}
			// 	});
		},
	}
}
</script>
<style scoped="scoped" lang="less">
.big-center {
	width: 100%;
	height: 51px;
	line-height: 51px;
	color: #999;
	font-size: 14px;
	background: #343434;
	padding: 0;
}

.center {
	width: 1200px;
	margin: 0 auto;

}

.el-row {
	display: flex;
	justify-content: space-between;
	margin: 0 !important;
}

.el-col {
	padding: 0 !important;
}

.Hcenter {
	display: flex;
	align-items: center;
	width: 154px;
	margin: 0;
}

.Hcenter:hover {
	cursor: pointer;
}

.top-left {
	text-align: left;

}

.top-left div {
	display: inline-block;
}

.logoname {
	width: 40%;
}

.logins {
	// width: 50%;
	text-align: center;
}

.guoqi {
	width: 14px;
	height: 14px;
}

.logins span {
	color: #999;
	text-decoration: none;
}

.logins span:hover {
	color: #FF0D18;
	cursor: pointer;
}

.xian {
	margin: 0 10px;
}

.kong {
	width: 100%;
	height: 24px;
}

.top-right {
	text-align: right;
}

.top-right span {
	display: inline-block;
	margin-left: 20px;
	color: #999;
	text-decoration: none;
}

.top-right span:hover {
	color: #FF0D18;
	cursor: pointer;
}

.big-centers {
	width: 100%;
	height: 112px;
	background: #fff;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	/* line-height: 120px; */
}

.big-centersBox {
	margin: 0 auto;
	height: 112px;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.big-centers .center .cons {
	display: inline-block;
}

.left {
	width: 30%;
	text-align: left;
}

.homelog {
	border: 1px solid red;
	height: 55px;
	width: 155px;
	margin-right: 20px;
}

.left img {
	position: relative;
	bottom: 6px;
}

.cont {
	width: 900px;
	height: 55px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.searchs {
	/* padding-top: 26px; */
	width: 900px;
	height: 100%;
	border-radius: 30px;
	border: 1px dashed #CECECE;
	background: #fff;
}


.search-list {
	text-align: left;
	font-size: 14px;
	color: #999;
	margin-top: 10px;
}

.search-list div {
	display: inline-block;
	width: 16%;
	cursor: pointer;
}

.one {
	color: #FF0D18;
}

.one .re {
	display: inline-block;
	font-size: 12px;
	border: 1px solid #FF0D18;
	/* width: 14px;
    height: 14px; */
	/* border-radius: 2px; */
	background: #FFC1C1;
	padding: 0 2px;
	/* margin-right: 6px; */
}

.right {
	width: 20%;
	text-align: right;
	color: #FF2D55;
	font-size: 18px;
}

.myCars {
	position: relative;
	bottom: 20px;
	border: 2px solid #FF2D55;
	border-radius: 4px;
	width: 65%;
	text-align: center;
	height: 45px;
	line-height: 45px;
	margin-left: 35%;
	cursor: pointer;
}

.carimg {
	position: relative;
	top: 3px;
}

.el-input-group__append,
.el-input-group__prepend {
	background: #FF2D55 !important;
	color: #fff !important;
	border: 1px solid #FF2D55 !important;
}

.el-input {
	height: 55px;
	line-height: 55px;
	border-radius: 30px !important;
	overflow: hidden;
}

/deep/.el-input__inner {
	// width: 890px !important;
	height: 54px !important;
	line-height: 55px !important;
	border-radius: 30px !important;
	// border-right: none !important;
	// border: none;
	border: none !important;
}

/deep/.el-input-group__append {
	width: 175px !important;
	height: 55px !important;
	border: none !important;
	box-sizing: border-box;
	font-size: 18px;
	border-radius: 30px !important;
	background: #000 !important;
	// overflow: hidden;


}

/deep/.el-button {
	width: 175px !important;
	border-radius: 30px !important;
	overflow: hidden !important;
}

/deep/.zhongwen .el-button span {
	display: inline-block;
	padding-left: 18px;
	letter-spacing: 18px !important;
}

.houwuche {
	// width: 79px;
	max-width: 150px;
	height: 55px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	// text-align: center;
	// flex-wrap: wrap;
	// background: cadetblue;
}

.houwuche:hover {
	cursor: pointer;
}

/* ::v-deep.el-input__inner{
	height: 55px !important;
	line-height: 55px !important;
}
.el-input-group__append{
	border-radius: 30px !important;
	overflow: hidden !important;
} */
// @media (max-width: 1439px) {
// 	.center {
// 		width: 90% !important;
// 	}

// 	.Hcenter {
// 		width: 10% !important;
// 	}

// 	.cont {
// 		width: 60% !important;

// 		.searchs {
// 			width: 100% !important;
// 		}
// 	}

// 	.houwuche {
// 		width: 20%;
// 	}
// }</style>
